import './index.less';

import React, { Fragment, useCallback, useMemo } from 'react';
import { Menu, Dropdown, Button } from 'antd';
import { EllipsisOutlined } from '@ant-design/icons';
import { constants } from '../../../contants';
import { ActionItem } from '../../../typings/ActionItem';
import { ColumnFieldBase } from '../../../typings/ColumnFieldBase';
import { bizUtil } from '../../../utils';
import { componentUtil } from '../../../utils/componentUtil';

type OperationColumnFieldProps = ColumnFieldBase & {
  actions: ActionItem[];
  foldNumber: number; // 超过foldNumber个数按钮进行折叠
};

const OperationColumnField: React.FC<OperationColumnFieldProps> = props => {
  const { actions = [], value, item, componentsMap, foldNumber } = props;

  const prefixCls = useMemo(
    () => `${constants.columnFieldPrefix}-operation`,
    [],
  );
  const visibleActions = actions?.filter(
    ac => !bizUtil.executeLogicCondition(ac.hidden || false, { item, value }),
  );

  // console.log(visibleActions, 'jj');

  let normalActions = visibleActions;
  let foldActions = [] as any;
  if (foldNumber !== undefined && foldNumber < visibleActions.length) {
    normalActions = visibleActions.slice(0, foldNumber - 1);
    foldActions = visibleActions.slice(foldNumber - 1, visibleActions.length);
  }

  const renderActions = (ac: any) => {
    const needDisabled = bizUtil.executeLogicCondition(ac.disabled, {
      item,
      value,
    });

    // 构造样式
    const itemClass = componentUtil.classnames(`${prefixCls}-item`, {
      [`${prefixCls}-item-disabled`]: needDisabled,
    });

    function doHandler(evt: any) {
      // 如果是禁用，就点击无效
      if (needDisabled) {
        return;
      }
      componentUtil.ensureFunction(ac.handler)(
        { originalEvent: evt },
        value,
        item,
      );
    }

    // 如果有自定义组件
    if (ac.componentName) {
      if (componentsMap) {
        const Comp = componentsMap[ac.componentName];
        return (
          <Comp
            {...ac}
            key={ac.label}
            value={value}
            item={item}
            handler={doHandler}
            itemClass={itemClass}
            needDisabled={needDisabled}
          />
        );
      }
    }

    return (
      <Button
        type="link"
        key={ac.label}
        disabled={needDisabled}
        onClick={evt => {
          ac.handler();
          // doHandler(evt);
        }}
      >
        {ac.label}
      </Button>
    );
  };

  return (
    <span className={prefixCls}>
      {normalActions.map(renderActions)}
      {/* {foldActions?.length > 0 && (
        <Dropdown
          overlay={
            <Menu>
              {foldActions.map((ac: number, i: number) => (
                <Fragment>
                  {i !== 0 && <Menu.Divider />}
                  <Menu.Item key={i}>{renderActions(ac)}</Menu.Item>
                </Fragment>
              ))}
            </Menu>
          }
        >
          <a>
            <EllipsisOutlined />
          </a>
        </Dropdown>
      )} */}
    </span>
  );
};

export { OperationColumnFieldProps, OperationColumnField };
